<template>
  <div class="Sub_account_buy">
    <c-title :hide="false" text="兑换城主身份"></c-title>
    <van-tabs v-model="active" title-active-color="#F15353" @change="tabChange">
      <van-tab title="平台兑换"></van-tab>
      <van-tab title="转让兑换"></van-tab>
    </van-tabs>
    <template v-if="active == 0">
      <div class="platform">
        <div class="cell_box">
          <div class="line bor">
            <div class="line_l ">当前城主身份价格</div>
            <div class="rightBox">
              <div class="line_r" v-for="(item, index) in infoData.details" :key="index">￥{{ item.price }}</div>
            </div>
          </div>
          <div class="line">
            <div class="line_l ">购买数量</div>
            <div class="line_r">
              <van-stepper v-model="value" theme="round" button-size="22" disable-input min="1" :max="valid_number" integer @change="changeGet" v-if="is_open_batch" />
              <span v-else>{{ value }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="cell_box">
          <div class="line">
            <div class="line_l ">签署协议</div>
            <div class="line_r">
              未完成
              <i class="iconfont icon-icon_more11"></i>
            </div>
          </div>
        </div> -->
      </div>
    </template>
    <template v-else>
      <div class="platform">
        <div class="cell_box" style="padding-bottom: 1rem;">
          <div class="line bor">
            <div class="line_l ">城主身份证号：</div>
            <div class="line_r">
              <input type="number" placeholder="请输入城主身份证号" v-model="childId" />
            </div>
          </div>
          <div class="tips" v-show="!chilId_info && childId">未找到该城主身份证号</div>
          <div class="line" v-if="chilId_info">
            <div class="line_l ">当前城主身份价格</div>
            <div class="line_r">￥{{ chilId_info.price }}</div>
          </div>
        </div>
        <!-- <div class="cell_box">
          <div class="line">
            <div class="line_l ">签署协议</div>
            <div class="line_r">
              未完成
              <i class="iconfont icon-icon_more11"></i>
            </div>
          </div>
        </div> -->
      </div>
    </template>
    <div class="btnBox set-pc-style">
      <div class="btn_l">
        <!-- 支付总金额
        <div class="price"><em>￥</em>{{ active == 1 ? (this.chilId_info ? this.chilId_info.price : 0) : infoData.price }}</div> -->
      </div>
      <div class="btn_r" :class="[checkBuy]" @click="tobuy">立即购买</div>
    </div>
  </div>
</template>
<script>
import { debounce } from "lodash";
import _ from "lodash";
export default {
  data() {
    return {
      active: 0,
      value: 1,
      infoData: [],
      chilId_info: null,
      childId: "",
      is_open_batch: false, //购买数量批量开关
      valid_number: 1 //限制最大
    };
  },
  watch: {
    childId: function() {
      this.debounceOnfi();
    }
  },
  computed: {
    checkBuy() {
      if (this.active == 1) {
        if (!this.chilId_info) {
          return "btn_rA";
        }
      } else {
        if (!this.infoData?.price) {
          return "btn_rA";
        }
      }
      return;
    }
  },
  created() {
    this.debounceOnfi = debounce(this.getChild, 600);
  },
  activated() {
    this.value = 1;
    this.infoData = [];
    this.active = 0;
    this.getData();
  },
  methods: {
    tabChange() {
      this.init();
      if (this.active != 1) {
        this.getData();
      }
    },
    init() {
      this.chilId_info = null;
      this.childId = "";
      this.infoData = {};
      this.value = 1;
    },
    changeGet() {
      this.getData();
    },
    async getData() {
      let json = {
        count: this.value
      };
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.child-id.checkChildIds", json, "");
      if (result) {
        this.infoData = data.data;
        this.is_open_batch = data.is_open_batch;
        console.log(this.infoData);
        if (this.infoData?.valid_number && this.is_open_batch) {
          this.valid_number = this.infoData?.valid_number;
        }
      } else {
        this.infoData = {};
        this.is_open_batch = false;
        this.$toast(msg);
      }
    },
    async tobuy() {
      if ( this.active == 0 && !_.has(this.infoData, "price")) {
        console.log('平台购买没有数据return')
        return;
      } else if (this.active == 1 && !_.has(this.chilId_info,'child_id')){
        console.log('挂售购买没有数据return')
        return;
      }
      let { pay_sn } = await this.getOrderSn();
      let _seatChildId_json = {
        pay_sn: pay_sn
      };
      if (this.active == 0) {
        _seatChildId_json.count = this.value;
      }
      if (this.active == 1) {
        _seatChildId_json.child_id = this.chilId_info.child_id;
      }

      let { data: _sData, msg: _sMsg, result: _sResult } = await $http.post("plugin.project-party.frontend.controllers.child_id.seatChildId", _seatChildId_json, "");
      if(_sResult == 0) return this.$toast(_sMsg);

      if (this.active == 1) {
        if (this.chilId_info && _.has(this.chilId_info, "child_id")) {
          // let { pay_sn } = await this.getOrderSn();
          this.$router.push(this.fun.getUrl("idShopApplyPay", { tag: "idShopSub_b", price: Number(_sData.price) }, { child_id: this.chilId_info.child_id, ordersn: pay_sn }));
        }
        return;
      }

      this.$router.push(this.fun.getUrl("idShopApplyPay", { tag: "idShopSub", price: Number(_sData.price) }, { count: this.value,actualCount:_sData.count,  ordersn: pay_sn }));
    },
    async getOrderSn() {
      let json = {};
      if (this.active == 0) {
        json.child_ids = this.infoData.subids;
      }else{
        json.child_id = this.chilId_info.child_id
      }
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.child-id.getPaySn", json, "");
      return data;
    },
    async getChild() {
      if (!this.childId) return;
      $http
        .get("plugin.project-party.frontend.controllers.apply.checkChildId", { child_id: this.childId }, ".")
        .then(res => {
          if (res.result == 1) {
            this.chilId_info = res.data;
          } else {
            this.chilId_info = null;
            this.$toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.btnBox {
  width: 23.44rem;
  height: 3.91rem;
  background: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0 0.75rem;
  box-sizing: border-box;
  line-height: 3.91rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn_l {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 0.81rem;
    .price {
      font-weight: bold;
      color: #f15353;
      margin-left: 0.53rem;
      em {
        font-size: 0.81rem;
      }
      font-size: 1.13rem;
    }
  }
  .btn_r {
    flex-shrink: 0;
    width: 7.47rem;
    height: 2.5rem;
    background: #f15353;
    border-radius: 1.25rem;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 2.5rem;
    text-align: center;
    color: #ffffff;
  }
  .btn_rA {
    background: #999;
  }
}
.platform {
  margin: 0.63rem 0.75rem;
  overflow: hidden;
  .cell_box {
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    background: #ffffff;
    box-sizing: border-box;
    margin-bottom: 0.63rem;
    .tips {
      text-align: left;
      color: #f15353;
      margin-top: 0.3rem;
      font-size: 0.69rem;
    }
    .line {
      padding: 1.06rem 0;
      box-sizing: border-box;
      font-size: 0.81rem;
      display: flex;
      justify-content: space-between;
      .line_l {
        flex: 1;
        text-align: left;
      }
      .rightBox {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
      }
      .line_r {
        flex-shrink: 0;
        .icon-icon_more11 {
          color: #aaaab3;
          font-size: 0.85rem;
        }
        input {
          border: none;
          height: 100%;
          text-align: right;
        }
      }
    }
    .bor {
      border-bottom: 1px solid #f0f0f1;
    }
  }
}
</style>
